Ext.define('BISC.view.MonitorsPanel', {
    extend: 'Ext.panel.Panel',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'dataview',
                    id: 'monitorListDataview',
                    border: false,
                    style: 'background-color: white; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none;',
                    itemSelector: 'div.monitorSel',
                    selectedItemCls: 'monitorSelect',
                    overItemCls: 'monitorHover',
                    trackOver: true,
                    store: 'FolderListStore',
                    itemTpl: new Ext.XTemplate(
                        '<div class="monitorSel" style="position: relative; margin-bottom: 5px;">' +
                            '<div><span style="color: gray; font-size: 10px;">{subpath}</span></div>' +
                            '<div>{text}</div>' +
                            '<div style="position: absolute; right: 0px; top: 0px; padding: 5px; magin: 5px;"><span style="font-weight: bold">{sz}</span> images</div>' +
                        '</div>'
                    ),
                    scope: this,
                    listeners: {
                        itemcontextmenu: function(view, record, item, index, e) {
                            e.stopEvent();
                            var ctx = Ext.create('BISC.view.CtxMnuMonitorList', {record: record});
                            ctx.showAt(e.getXY());
                        },
                        itemdblclick: function( grid, record, el, ind, e, opts ) {
                            Ext.StoreManager.lookup('ImagesStore').getProxy().extraParams.folderId = record.data.id;
                            Ext.StoreManager.lookup('ImagesStore').getProxy().extraParams.bisId = Config.server.id;
                            Ext.StoreManager.lookup('ImagesStore').load();
                        }
                    }
                }
            ],
            dockedItems: [
                {
                    xtype: 'toolbar',
                    dock: 'top',
                    border: false,
                    items: [
                        {
                            xtype: 'tbfill'
                        },
                        {
                            xtype: 'textfield',
                            fieldLabel: 'Search',
                            labelWidth: 40
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});
